<template>
  <div class="scanResultBox" v-if="state.isCallPhone">
    <van-cell-group inset>
      <van-cell>
        <div class="text-c">
          您所查询的商品是广州源之创食品有限公司的合格产品，请放心使用，感谢惠顾!
        </div>
      </van-cell>
      <van-cell>
        <div class="text-c">
          服务电话：<a class="scanNumber" href="tel:13610119338">13610119338</a>
        </div>
      </van-cell>
    </van-cell-group>
    <!-- <LoginEvent v-if="!state.token"></LoginEvent> -->
  </div>

  <div v-else class="scanResultBox" @click="onScanCode">
    <van-cell-group inset class="main-view">
      <van-cell>
        <div class="text-c">
          第
          <text class="scanNumber">{{ count }}</text>
          次扫码，点击屏幕或者1秒后继续扫描
        </div>
      </van-cell>
      <van-cell v-if="state.scanSuccess">
        <div class="scanSuccess-tips text-c">
          <van-icon name="checked" size="30" color="#07c160" /> 记录添加成功
        </div>
      </van-cell>
      <van-cell v-else>
        <div class="scanError-tips text-c">
          <van-icon name="checked" size="30" color="#ee0a24" /> 记录添加失败
        </div>
      </van-cell>
      <van-cell v-if="state.scanResult">
        <div class="text-c">
          {{ state.scanResult || "" }}
        </div>
      </van-cell>
    </van-cell-group>
    <loginEvent v-if="!state.token"></loginEvent>
  </div>
</template>
<script setup>
import { reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import useCounterStore from "@/stores/counter.js";
import LoginEvent from "@/components/loginEvent.vue";
import api from "@/api/label.js";
// const animation = wx.createAnimation({});
let timer = null;
const router = useRouter();
const route = useRoute();
const useCounter = useCounterStore();
const { count } = storeToRefs(useCounter);

const state = reactive({
  canScan: false,
  showScanTips: false,
  isCallPhone: false,
  scanResult: null, // 处理问题 3
  // scanNumber: 0,
  scanSuccess: 0,
  token: localStorage.getItem("accessToken"),
});

function onLoad() {
  const query = route.query;
  if (query.code) {
    checkCode(query.code);
  }
}

async function checkCode(code) {
  try {
    const res = await api.check(code);
    console.log("checkCode：", res);
    if (res.code === 1002000009 || res.code === 401) {
      state.isCallPhone = true;
      state.canScan = false;
    } else {
      state.isCallPhone = false;
      state.scanResult = res.msg;
      state.scanSuccess = res.data;
      // state.scanNumber = state.scanNumber + 1;
      useCounter.increment();
      if (res.data) {
        state.canScan = false;
        onAgainScanCode();
      }
    }
  } catch (error) {
    if (error.code == 1002000009 || res.code === 401) {
      state.isCallPhone = true;
      state.canScan = false;
    }
  }
}
function onAgainScanCode() {
  state.showScanTips = false;
  clearTimeout(timer);
  timer = setTimeout(() => {
    router.replace({ path: "/scanCode" });
  }, 1000);
}

function onScanCode() {
  router.replace({ path: "/scanCode" });
}
onMounted(() => {
  onLoad();
});
</script>

<style lang="less" scoped>
.scanResultBox {
  height: calc(100vh - 40px);
  width: 100vw;
  text-align: center;
  padding-top: 20px;
}

.scanNumber {
  color: var(--button-info-background-color, #1989fa);
}

.canScanResult {
  font-size: 28px;
  font-weight: 600;
}

.scanSuccess-tips {
  font-size: 30px;
  font-weight: 600;
  color: #07c160;
  text-align: center;
}

.text-c {
  text-align: center;
}

.scanError-tips {
  font-size: 30px;
  font-weight: 600;
  color: #ee0a24;
  text-align: center;
}

.van-cell:after {
  display: none;
}
.main-view {
  padding-top: 16px;
  padding-bottom: 16px;
}
</style>
